<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <title>Title</title>
    <%@include file="../../common.jsp"%>
</head>
<body>
<h2>用户列表</h2>
<hr>
    <form class="layui-form" action="">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input id="names" type="text" name="price_min" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">角色:</label>
                <div class="layui-input-inline">
                    <select name="roleIds" class="layui-select" id="roles" xm-select="role">
                        <option value="-1">请选择</option>
                    </select>
                </div>
                <label class="layui-form-label">是否冻结:</label>
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" lay-search="" id="userState">
                        <option value="-1">请选择</option>
                        <option value="0">正常</option>
                        <option value="1">冻结</option>
                    </select>
                </div>

                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
                </div>
            </div>

        </div>
    </form>
    <table class="layui-table" lay-data="{id:'userTable',url:'${path}/psUser/list', page:true,toolbar:'#toolbarDemo',defaultToolbar: [],even: true}"
           lay-filter="userTable">
        <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">复选框</th>
            <th lay-data="{field:'id', width:80}">id</th>
            <th lay-data="{field:'username', width:180}">用户账号</th>
            <th lay-data="{field:'name'}">账户名称</th>
            <th lay-data="{field:'roleString'}">角色</th>
            <th lay-data="{field:'email'}">邮箱</th>
            <th lay-data="{field:'entryDate'}">入职日期</th>
            <th lay-data="{field:'lastLoginTime'}">最后登录时间</th>
            <th lay-data="{field:'userState',templet:'#lockedTem'}">状态</th>
            <th lay-data="{toolbar:'#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
    <script>

        //显示角色信息
        $.get("${path}/role/selectRoleAll",function (data) {
            $.each(data,function () {
                var option = $('<option></option>').appendTo("#roles");
                option.text(this.roleName).val(this.id);
            });
        });

        //全局定义一次, 加载formSelects
        layui.config({
            base: '${path}/layui/lay/modules/'
        }).extend({
            formSelects: 'formSelects-v4.min'
        });

        function searchData(){
            layui.table.reload("userTable",{
                page:{
                    curr : 1
                },
                where:{
                    "name":$("#names").val(),
                    "roleIds":layui.formSelects.value('role','valStr'),
                    "userState":$("#userState").val()
                }
            });
        }

        var isTrue = true;
        //判断是否存在重复的登录名称
        function selectUserName(){
            var userName = $(":input[name = 'username']").val();
            var id = $(":input[name = 'id']").val();
            $.get("${path}/psUser/getByUserName",{userName:userName,id:id},function (data) {
                if(data != ""){
                    layer.msg("登录名已存在!");
                    isTrue = false;
                }else{
                    isTrue = true;
                }
            });
        }


        layui.use(["table","form","formSelects"],function () {
            var table = layui.table;
            //监听头部工具栏时间
            table.on('toolbar(userTable)',function (obj) {
                var e = obj.event;
                switch (e) {
                    case "add":
                        $.get('${path}/psUser/userForm',function (str) {
                            layer.open({
                                type:1,
                                title:'添加用户',
                                content: str,
                                area:'700px',
                                skin:'layui-layer-molv',
                                btn:['确定','取消'],
                                success:function () {
                                    $(":input[name = 'username']").blur(function () {
                                        selectUserName();
                                    })
                                },
                                yes:function (index) {
                                    selectUserName();
                                    var roleIds = layui.formSelects.value('roles','valStr');
                                    if(roleIds == ""){
                                        layer.msg("请选择角色");
                                    }else{
                                        if(isTrue){
                                            var params = $("#userForm").serialize();
                                            $.post('${path}/psUser/addUser',params,function (data) {
                                                if(data){
                                                    layer.msg("添加成功!");
                                                    layer.close(index);
                                                    searchData();
                                                }else{
                                                    alert("添加失败!");
                                                }
                                            })
                                        }
                                    }
                                }
                            })
                        });
                        break;
                    case "delete":
                        var rows = table.checkStatus('userTable');
                        var data = rows.data;
                        if(data.length == 0){
                            layer.msg("请选择要删除的数据",function (){});
                            return;
                        }else{
                            var ids=new Array();
                            for (var i=0;i<data.length;i++){
                                ids+=data[i].id;
                                if(i!=data.length-1){
                                    ids+=",";
                                }
                            }
                            layer.open({
                                time:0,
                                title:'友情提示',
                                content:'确定要删除吗？',
                                btn:['确定','取消'],
                                yes : function () {
                                    $.post("${path}/psUser/delete",{"ids":ids},function () {
                                        layer.msg('删除成功！！！');
                                        table.reload('userTable');
                                    });
                                }
                            })
                        }
                        break;
                }
            });

            //监听行事件
            table.on("tool(userTable)",function (obj) {
                var data = obj.data;
                if (obj.event == 'edit'){
                    $.get('${path}/psUser/userForm',function (str) {
                        layer.open({
                            type:1,
                            title:'修改用户',
                            content: str,
                            area:'700px',
                            skin:'layui-layer-molv',
                            btn:['确定','取消'],
                            success:function () {
                                $.get("${path}/psUser/get",{id:data.id},function (data) {
                                    layui.form.val("userForm",data);
                                    //选中下拉框
                                    var role = new Array();
                                    for(let r of data.roles){
                                        role.push(r.id);
                                    }
                                    layui.formSelects.value('roles',role)
                                })
                                $(":input[name = 'username']").blur(function () {
                                    selectUserName();
                                })
                            },
                            yes:function (index) {
                                selectUserName();
                                var roleIds = layui.formSelects.value('roles','valStr');
                                if(roleIds == ""){
                                    layer.msg("请选择角色");
                                }else{
                                    if(isTrue){
                                        var params = $("#userForm").serialize();
                                        $.get('${path}/psUser/update',params,function (data) {
                                            if(data){
                                                layer.close(index);
                                                layer.msg("修改成功!");
                                                table.reload("userTable");
                                            }else{
                                                alert("修改失败!");
                                            }
                                        })
                                    }
                                }
                            }
                        })
                    });
                }else if(obj.event == 'del'){
                    layer.open({
                        time:0,
                        title:'友情提示',
                        content:'确定要删除吗？',
                        btn:['确定','取消'],
                        yes : function () {
                            $.post("${path}/psUser/delete",{"ids":data.id},function () {
                                layer.msg('删除成功！！！');
                                table.reload('userTable');
                            });
                        }
                    })
                }
            })
        });
    </script>
    <script type="text/html" id="lockedTem">
        <input type="checkbox" title="冻结" {{d.userState == 1 ? 'checked' : ''}}>
    </script>
    <script type="text/html" id="barDemo">
        <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </div>
    </script>

</body>
</html>
